<template>
  <div class="w-full h-full select-none">
    <div class="fixed top-0 left-0 flex flex-col gap-x-4 items-center justify-center z-10 font-color p-4 text-lg">
      <div>{{ title }}</div>
      <div>{{ subTitle }}</div>
    </div>
    <Swiper @swiper="handleSwiperInit" :controller="{ inverse: true }" :modules="modules" :speed="0">
      <SwiperSlide>
        <div class="slider-style"></div>
      </SwiperSlide>
      <SwiperSlide>
        <div class="slider-style">
          <div class="w-full">{{ title }}</div>
          <div class="w-full">{{ subTitle }}</div>
        </div>
      </SwiperSlide>
      <SwiperSlide v-for="(textArr, index) in sliderArr" :key="index" class="slider-style">
        <div v-for="(text, index) in textArr" :key="index" class="w-full" ref="slideTextRef">
          {{ text }}
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>
<script setup>
import { useModel, watch, ref, computed } from "vue";
import useController from "../../hooks/useController";
import { useElementSize } from "@vueuse/core";

import { messageType } from "../../../config";
import { useAutoOneLineFontSize } from "../../hooks/useSliderTextAutoOneLine.ts";
const swiper = ref(null);
const slideTextRef = ref(null);
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
});
const emit = defineEmits(["update:modelValue", "change"]);
const modelValue = useModel(props, "modelValue", emit);
const { width } = useElementSize(slideTextRef);
const power = ref(9);
const {
  Swiper,
  SwiperSlide,
  modules,
  lineHeight,
  subTitle,
  title,
  fontColor,
  sliderArr,
  fontSize,
  textAlign,
  bgColor,
  pageIndex,
  adUrl,
} = useController(modelValue, emit, power);
function handleSwiperInit(cswiper) {
  swiper.value = cswiper;
}
const titleFontSize = computed(() => {
  return parseInt(fontSize) * 1.5 + "px";
});

const currentTextArr = computed(() => {
  if (sliderArr.value.length > 0) {
    return sliderArr.value[modelValue.value.pageIndex - 2];
  }
});
//1
const autoFontSize = computed(() => {
  if (
    currentTextArr.value == void 0 ||
    modelValue.value.messageType !== messageType.ZM ||
    !modelValue.value.isAutoOneLine
  ) {
    return fontSize.value;
  }
  return useAutoOneLineFontSize(currentTextArr.value, {
    fontSize: fontSize.value,
    width: width.value + "px",
    fontWeight: 800,
  });
});
watch(
  pageIndex,
  (newVal) => {
    if (swiper.value) {
      setTimeout(() => {
        swiper.value.slideTo(newVal);
      });
    }
  },
  {
    immediate: true,
  }
);
defineExpose({ swiper });
</script>
<style scoped>
.font-color {
  color: v-bind(fontColor);
}

.font-size {
  font-size: v-bind(fontSize);
}

.slider-title {
  font-size: v-bind(titleFontSize);
}
.slider-style {
  background-color: v-bind(bgColor);
  text-align: v-bind(textAlign);
  font-size: v-bind(autoFontSize);
  color: v-bind(fontColor);
  line-height: v-bind(lineHeight);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-weight: 800;
  transition: height 0.3s linear;
  height: 100vh;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  padding: 1rem;
}

.swiper {
  --swiper-pagination-color: #fff; /* 两种都可以 */

  --swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px; /* 设置按钮大小 */
}
</style>
